/**
 * Chargement des données JSON pour l'affichage du graphe Highcharts en bulles.
 */
function loadGraphBubble(nivGeog, geog, idGeog) {
	var quota = "";
	if ($('#quotaRadioMarcheId').get(0).checked) {
		quota = "QM";
	} else if ($('#quotaRadioProduitId').get(0).checked) {
		quota = "QP";
	}
	var product		= $('#productId').get(0).value;
	var source 		= $('#sourceId').get(0).value;
	var periode		= $('#periodId').get(0).value;
	var unite		= $('#unitId').get(0).value;
	
	var indicateur1 = "";
	var indicateur2 = "";
	if ($('#paramBubbleIndicateur1Id').length != 0) {
		indicateur1 = $('#paramBubbleIndicateur1Id').get(0).value;
		indicateur2 = $('#paramBubbleIndicateur2Id').get(0).value;
	} else {
		if (statutProduit == 'complet') {
			indicateur1 = 'PM';
			indicateur2 = 'D_PM';
		} else if (statutProduit == 'pasDeMarche') {
			indicateur1 = 'VOL';
			indicateur2 = 'EVOL_VOL';
		} else if (statutProduit == 'lancement') {
			indicateur1 = 'PM';
			indicateur2 = 'VOL';
		} 
	}
	
	// A l'UGA, on force les indicateurs PM et DeltaPM 
	if (nivGeog == 'UGA') {
		if (indicateur1 != 'PM' || indicateur2 != 'D_PM') {
			Ext.Msg.alert('Attention', 'A l\'UGP, les indicateurs sont toujours la PM et le &Delta;PM');
		}
		indicateur1 = 'PM';
		indicateur2 = 'D_PM';
		$('#paramBubbleIndicateur1Id').html(listeIndicateurs);
		$('#paramBubbleIndicateur2Id').html(listeIndicateurs);
		$('#paramBubbleIndicateur1Id').val('PM');
		$('#paramBubbleIndicateur2Id').val('D_PM');
	} 
	
	if (statutProduit == 'complet' || statutProduit == 'pasDeMarche' || statutProduit == 'lancement') {
		$('#buttonConfigBubbleId').css("display", "block");
		$('#buttonBubbleBack').css("display", "block");
		$.ajax({
			traditional: true, 
			type: 'POST', 
			url: './dataBubble.do',
			target: "_blank", 
			data : {
				nivGeog: 	nivGeog,
				geog: 		geog,
				source: 	source,
				product: 	product,
				idGeog: 	idGeog,
				periode: 	periode,
				unite:		unite,
				quota:		quota,
				indicateur1:	indicateur1,
				indicateur2:	indicateur2
			},
			error: function () {},
			success: function(result) { 
				if (pmFrance == '') {
					levelInformations('', 'France', geog, 0);
				}
				levelInformations(result, nivGeog, geog, idGeog); // pour recuperer la pm et le deltaPm courants puis afficher le graphe
			}
		 }); 
	} else {
		$('#buttonConfigBubbleId').css("display", "none");
		$('#buttonBubbleBack').css("display", "none");
		$('#graphBubble').html('<div align="center" style="padding-top:50px;" class="text-general">Non applicable pour ce produit</div>');
	}
}

/**
 * Affichage du graphe Highcharts en bulles.
 */
function displayGraphBubble(json, nivGeog, geog) {
	
	// Valeur pour l'intersection des axes 
	var minJsondataZ = 10000000;
	for (val in json.data) {
		minJsondataZ = Math.min(json.data[val].z, minJsondataZ);
	}
	var objetCentre = new Object();
	objetCentre.lib = geog;
	objetCentre.niveau = "";
	//objetCentre.x = parseFloat(pmCurrent);
	if ($('#paramBubbleIndicateur1Id').html() == undefined) {
		if (statutProduit == 'complet') {
			objetCentre.x = parseFloat(pmCurrent);
		} else if (statutProduit == 'pasDeMarche') {
			objetCentre.x = parseFloat(volCurrent);
		} else if (statutProduit == 'lancement') {
			objetCentre.x = parseFloat(pmCurrent);
		}
	} else {
		if ($('#paramBubbleIndicateur1Id').get(0).value == 'PM') {
			objetCentre.x = parseFloat(pmCurrent);
		} else if ($('#paramBubbleIndicateur1Id').get(0).value == 'D_PM') {
			objetCentre.x = parseFloat(deltaPmCurrent);
		} else if ($('#paramBubbleIndicateur1Id').get(0).value == 'VOL') {
			objetCentre.x = parseFloat(volCurrent);
		} else if ($('#paramBubbleIndicateur1Id').get(0).value == 'D_VOL') {
			objetCentre.x = parseFloat(deltaVolCurrent);
		} else if ($('#paramBubbleIndicateur1Id').get(0).value == 'EVOL_VOL') {
			objetCentre.x = parseFloat(evolVolCurrent);
		}
	}
	//objetCentre.y = parseFloat(deltaPmCurrent);
	if ($('#paramBubbleIndicateur2Id').html() == undefined) {
		if (statutProduit == 'complet') {
			objetCentre.y = parseFloat(pmCurrent);
		} else if (statutProduit == 'pasDeMarche') {
			objetCentre.y = parseFloat(volCurrent);
		} else if (statutProduit == 'lancement') {
			objetCentre.y = parseFloat(pmCurrent);
		}
	} else {
		if ($('#paramBubbleIndicateur2Id').get(0).value == 'PM') {
			objetCentre.y = parseFloat(pmCurrent);
		} else if ($('#paramBubbleIndicateur2Id').get(0).value == 'D_PM') {
			objetCentre.y = parseFloat(deltaPmCurrent);
		} else if ($('#paramBubbleIndicateur2Id').get(0).value == 'VOL') {
			objetCentre.y = parseFloat(volCurrent);
		} else if ($('#paramBubbleIndicateur2Id').get(0).value == 'D_VOL') {
			objetCentre.y = parseFloat(deltaVolCurrent);
		} else if ($('#paramBubbleIndicateur2Id').get(0).value == 'EVOL_VOL') {
			objetCentre.y = parseFloat(evolVolCurrent);
		}
	}
	objetCentre.z = minJsondataZ / 5;
	var seriesObjetCentre = [];
	seriesObjetCentre.push(objetCentre);
	
	var objetFrance = new Object();
	objetFrance.lib = 'France';
	objetFrance.niveau = "";
	//objetFrance.x = parseFloat(pmFrance);
	if ($('#paramBubbleIndicateur1Id').html() == undefined) {
		if (statutProduit == 'complet') {
			objetFrance.x = parseFloat(pmFrance);
		} else if (statutProduit == 'pasDeMarche') {
			objetFrance.x = parseFloat(volFrance);
		} else if (statutProduit == 'lancement') {
			objetFrance.x = parseFloat(pmFrance);
		}
	} else {
		if ($('#paramBubbleIndicateur1Id').get(0).value == 'PM') {
			objetFrance.x = parseFloat(pmFrance);
		} else if ($('#paramBubbleIndicateur1Id').get(0).value == 'D_PM') {
			objetFrance.x = parseFloat(deltaPmFrance);
		} else if ($('#paramBubbleIndicateur1Id').get(0).value == 'VOL') {
			objetFrance.x = parseFloat(volFrance);
		} else if ($('#paramBubbleIndicateur1Id').get(0).value == 'D_VOL') {
			objetFrance.x = parseFloat(deltaVolFrance);
		} else if ($('#paramBubbleIndicateur1Id').get(0).value == 'EVOL_VOL') {
			objetFrance.x = parseFloat(evolVolFrance);
		}
	}
	//objetFrance.y = parseFloat(deltaPmFrance);
	if ($('#paramBubbleIndicateur2Id').html() == undefined) {
		if (statutProduit == 'complet') {
			objetFrance.y = parseFloat(pmFrance);
		} else if (statutProduit == 'pasDeMarche') {
			objetFrance.y = parseFloat(volFrance);
		} else if (statutProduit == 'lancement') {
			objetFrance.y = parseFloat(pmFrance);
		}
	} else {
		if ($('#paramBubbleIndicateur2Id').get(0).value == 'PM') {
			objetFrance.y = parseFloat(pmFrance);
		} else if ($('#paramBubbleIndicateur2Id').get(0).value == 'D_PM') {
			objetFrance.y = parseFloat(deltaPmFrance);
		} else if ($('#paramBubbleIndicateur2Id').get(0).value == 'VOL') {
			objetFrance.y = parseFloat(volFrance);
		} else if ($('#paramBubbleIndicateur2Id').get(0).value == 'D_VOL') {
			objetFrance.y = parseFloat(deltaVolFrance);
		} else if ($('#paramBubbleIndicateur2Id').get(0).value == 'EVOL_VOL') {
			objetFrance.y = parseFloat(evolVolFrance);
		}
	}
	objetFrance.z = minJsondataZ / 5;
	var seriesObjetFrance = [];
	if (nivGeog != 'France') {
		seriesObjetFrance.push(objetFrance);
	}
	
	var clickDetected = false;
	
	var title = "";
	
	// Affichage du titre du graphe
	if (nivGeog == geog) { // Niveau France
		title = nivGeog;
	} else { // Autres niveaux 
		title = geog; 
	}
	
	// Legende en X
	var indicateurTitle1 = "";
	if ($('#paramBubbleIndicateur1Id').html() == undefined) {
		$('#paramBubbleIndicateur1Id').html(listeIndicateurs);
		if (statutProduit == 'complet') {
			indicateurTitle1 = "PM";
		} else if (statutProduit == 'pasDeMarche') {
			indicateurTitle1 = "VOL";
		} else if (statutProduit == 'lancement') {
			indicateurTitle1 = "PM";
		}
	} else {
		indicateurTitle1 = $('#paramBubbleIndicateur1Id').get(0).options[$('#paramBubbleIndicateur1Id').get(0).selectedIndex].text;
	}
	// Legende en Y 
	var indicateurTitle2 = "";
	if ($('#paramBubbleIndicateur2Id').html() == undefined) {
		$('#paramBubbleIndicateur2Id').html(listeIndicateurs);
		if (statutProduit == 'complet') {
			indicateurTitle2 = "&Delta;PM (pt)";
		} else if (statutProduit == 'pasDeMarche') {
			indicateurTitle2 = "EVOL VOL (%)";
		} else if (statutProduit == 'lancement') {
			indicateurTitle2 = "VOL";
		}
	} else {
		indicateurTitle2 = $('#paramBubbleIndicateur2Id').get(0).options[$('#paramBubbleIndicateur2Id').get(0).selectedIndex].text;
	}
	
    var chartBubble = new Highcharts.Chart({
		chart: {
		    renderTo: 'graphBubble', 
		    type: 'bubble',
		    plotBorderWidth: 1
		},
		credits: {
            enabled: false
        },
		exporting: {
	        enabled: true
	    },
	    title: {
            text: '<span style="font-size:13px;font-family:Arial;">' + lib_marche + ' : ' + title + ' (' + lib_mois + ')' + "</span>",
            useHTML: true
        },
        subtitle: {
        	text: '<span style="font-size:10px;font-family:Arial;"><b>Source :</b> ' + ' ' + $('#sourceId').get(0).options[$('#sourceId').get(0).selectedIndex].text + ' - <b>P&eacute;riode :</b> ' + $('#periodId').get(0).options[$('#periodId').get(0).selectedIndex].text + ' - <b>Indicateurs produits :</b> ' + indicateurTitle1 + ' et ' + indicateurTitle2 + '</span>',
            useHTML: true
        },
		xAxis: {
			title: {
				text:'<span style="font-size:11px;font-family:Arial;font-weight:normal;">' + indicateurTitle1 + '</span>', //TODO: Part de Marche
				useHTML: true
			},
		    labels: {
		        formatter: function() {
		            return this.value;//TODO: +' %';
		        },
		        style: {
		            color:  '#4572A7',
		            fontSize: '9px',
	            	fontFamily: 'Arial'
		        }
		    },
		    plotLines: [
		        { 
			    	color: '#FF0000',
			        width: 2,
			        id: 'plotline-1'
	    		},
	    		{
	    			"value":json.xPere,
	    			"width":1,
	    			"color":"black",
	    			"zIndex":10,
	    			"label": {
	    				"text":"",
	    				"rotation":0,
	    				"align":"center",
	    				"x":0,
	    				"y":-5,
	    				"style": {
	    					"fontSize":"6px", 
	    					"color":"#ff0000"
	    				}
	    			}
	    		}
	    	]
	    },
	    yAxis: {
	    	title: {
	    		text:'<span style="font-size:11px;font-family:Arial;font-weight:normal;">' + indicateurTitle2 + '</span>',
	    		useHTML: true
	    	},
	    	gridLineDashStyle: 'dot',
	    	labels: {
	    		formatter: function() {
	    			return this.value;//TODO: +' pt';
	    		},
	    		style: {
	    			color:  '#4572A7',
	    			fontSize: '9px',
	            	fontFamily: 'Arial'
	            }
	        },
	        plotLines:[ 
	            {
	            	value:0,
	            	width:2,
	            	color:"#ff0000",
	            	zIndex:10,
	            	dashStyle:"Dash",
	            	label:
	            		{
	            			text:"",
	            			rotation:0,
	            			align:"center",
	            			verticalAlign:"top",
	            			style:
	            				{
	            					fontSize:"8px", 
	            					color:"#ff0000"
	            				}
	            		}
	            },
	        	{
	            	value:json.yPere,
	            	width:1,
	            	color:"black",
	            	zIndex:10,
	            	label:
	            		{
	            			text:"",
	            			rotation:0,
	            			align:"center",
	            			verticalAlign:"top",
	            			style:
	            				{
	            					fontSize:"8px",
	            					color:"#ff0000"
	            				}
	            		}
	            }
	        ]
		
	    },
	    
	    plotOptions: {
	        bubble: {
	            minSize: 20
	        }
	    },
	    
	    legend: {
	    	enabled: false, // desactive la legende 
	        layout: 'horizontal',
	        align: 'center',
	        x: 0,
	        verticalAlign: 'bottom',
	        y: 0,
	        floating: false,
	        backgroundColor: '#FFFFFF',
	        itemStyle: {
	        	fontSize : '10px',
	        	fontFamily: 'Arial'
	        },
	        useHTML: true
	    },
	    
	    tooltip: { // info bulle 
            shared: false,
            crosshairs: true,
            formatter: function() {
            	var textDisplay = '<span style="font-size:11px;font-family:Arial;font-weight:normal;">' + this.point.lib + '</span>';
            	var ind1 = indicateurTitle1;
            	var ind2 = indicateurTitle2;
            	if (ind1 == '&Delta;PM (pt)') {
            		ind1 = 'DeltaPM (pt)';
            	}
            	if (ind2 == '&Delta;PM (pt)') {
            		ind2 = 'DeltaPM (pt)';
            	}
            	if (ind1 == '&Delta;VOL (vol)') {
            		ind1 = 'DeltaVOL (vol)';
            	}
            	if (ind2 == '&Delta;VOL (vol)') {
            		ind2 = 'DeltaVOL (vol)';
            	}
            	textDisplay += '<br />' + '<span style="font-size:11px;font-family:Arial;font-weight:normal;">' + ind1 + ' : ' + this.x + '</span>';
            	textDisplay += '<br />' + '<span style="font-size:11px;font-family:Arial;font-weight:normal;">' + ind2 + ' : ' + this.y + '</span>';
            	return textDisplay;
            }
        },
	    
		series: 
		[
		{
			dataLabels: {
				enabled: true,
				style: { 
					color:"black",
					fontSize:"10px",
					fontFamily: 'Arial',
					textShadow: "0px 0px #000000" // ombre sur le texte
				},
				zindex: 2,
				verticalAlign: "top", // texte au dessus de la boule
				x:0,
				y:-15,
				formatter: function() {
					return this.point.lib;
				}
			},
			data: json.data,
			point:{
				events: {
					click: function(event) {
	                    if (clickDetected) {
	                        // Double clic sur le graphe 
	                    	if (ugp || (!ugp && this.niveau != 'UGP')) {
	                    		globalNivGeog = this.niveau;
	                        	globalGeog = this.category;
	                        	idGeog = this.idGeog;
	                        	// Ouverture de l arbre de gauche
	      		  				$(this).jstree("open_node", $("#" + idGeog + "-" + globalNivGeog).parent().parent().parent().children("a"));
	      		  				$("#" + idGeog + "-" + globalNivGeog).addClass("jstree-clicked");
	    	  		  			$("#" + idGeog + "-" + globalNivGeog).click();
	                    	}
	                        clickDetected = false;
	                    } else {
	                        clickDetected = true;
	                        setTimeout(function() {
	                            clickDetected = false;
	                        }, 500); 
	                    }
	                }
	            }
			},
			name:'Volume Marche',
			marker: {
				lineColor: 'rgba(69,114,167,0.5)',
				lineWidth: 0,
				fillColor: {
					radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
					stops: [ [0, 'rgba(255,255,255,0.5)'] , [1, 'rgba(69,114,167,0.5)'] ] // bleu on hover sur les bulles
	            }
	        }
		}
		,
		{	// Serie composee par la France 
			dataLabels: {
				enabled: true,
				style: { 
					color:"black",
					fontSize:"10px",
					fontFamily: 'Arial',
					textShadow: "0px 0px #000000" // ombre sur le texte
				},
				zindex: 2,
				verticalAlign: "top", // texte au dessus de la boule
				x:0,
				y:-15,
				formatter: function() {
					return this.point.lib;
				}
			},
			data: seriesObjetFrance,
			marker: {
				fillColor: '#ff6e00'
			}
		}
		,
		{	// Serie composee par la seule intersection des axes 
			dataLabels: {
				enabled: true,
				style: { 
					color:"black",
					fontSize:"10px",
					fontFamily: 'Arial',
					textShadow: "0px 0px #000000" // ombre sur le texte
				},
				zindex: 2,
				verticalAlign: "top", // texte au dessus de la boule
				x:0,
				y:-15,
				formatter: function() {
					return this.point.lib;
				}
			},
			data: seriesObjetCentre,
			marker: {
				fillColor: {
					radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
					stops: [ [0, 'rgba(255,255,255,0.5)'] , [1, 'rgba(160,32,240,0.5)'] ]
	            }
			}
		}
		]
	});
	 
    // Si toutes les bulles ont la meme PM 
    if (chartBubble.xAxis[0].max == chartBubble.xAxis[0].min) {
    	chartBubble.xAxis[0].setExtremes(0, 100);
    }

}

/**
 * Recuperation de la PM et DeltaPM courants puis affichage du graphe.
 */
function levelInformations(res, nivGeog, geog, idGeog) {
	
	var source		= $('#sourceId').get(0).value;
	var periode		= $('#periodId').get(0).value;
	var unite		= $('#unitId').get(0).value;
	
	$.ajax({ 
		traditional: true, 
		type: 'POST', 
		url: './updateLevelInformations.do', 
		target: "_blank", 
		data : {
			idGeog:		idGeog,
			nivGeog: 	nivGeog,
			source: 	source,
			unite:		unite,
			periode:	periode
		}, 
		error: function() {},
		success: function(result) { 
			// result.name
			if (nivGeog == 'France') {
				pmFrance = result.pm;
				deltaPmFrance = result.deltapm;
				volFrance = result.vol;
				deltaVolFrance = result.deltavol;
				evolVolFrance = result.evol;
			}
			pmCurrent = result.pm;
			deltaPmCurrent = result.deltapm;
			volCurrent = result.vol;
			deltaVolCurrent = result.deltavol;
			evolVolCurrent = result.evol;
			if (res != '') {
				displayGraphBubble(res, nivGeog, geog); 
			}
		}
	});
	
}